<template>
    <div style="padding-bottom: 60px">
        <header class="base-header">
            <i class="link-icon" @tap='back'></i>
            <h1 class="edit">编辑收货地址</h1>
        </header>
        <form class="mui-input-group address-edit" id="addressForm">
            <div class="mui-input-row">
                <label>收货人</label>
                <input type="text" maxLength='15' v-on:input="checkedText" class="mui-input-clear" v-model='receiverName' placeholder="请输入姓名">
            </div>
            <div class="mui-input-row">
                <label>联系电话</label>
                <input type="number" maxLength='11' oninput="if(value.length>11)value=value.slice(0,11)" class="mui-input-clear" v-model='receiverPhone' placeholder="请输入联系电话">
            </div>
            <div class="mui-input-row address-line-icon" @tap='showPick'>
                <label>所在地区</label>
                <div style='padding:10px 0px;' class="mui-input-clear"  >{{province + city + region}}</div>
                <i class="mui-icon mui-icon-arrowright"></i>
            </div>
            <div class="mui-input-row textarea">
                <label>详细地址</label>
                <textarea class="mui-input-clear" v-model='detailAddress' placeholder="请输入详细地址"></textarea>
            </div>
        </form>
        <div class="edit-fixed-btn" @tap='add'>保存</div>
    </div>
</template>
<script>
  import store from '../we-store';
  export default {
    data: function () {    // 组件的数据格式
      return {
        receiverName: '',
        receiverPhone: '',
        province: '',
        city: '',
        region: '',
        detailAddress: ''
      };
    },
    created: function () {
    },
    ready: function () {
      this.receiverName = '';
      this.receiverPhone = '';
      this.province = '';
      this.city = '';
      this.region = '';
      this.detailAddress = '';
    },
    watch: {
      receiverPhone: function (val) {
        console.log(val);
        var str = val.toString();
        if (str.length > 11) {
          val = Number(str.substring(0, 11));
          this.receiverPhone = val;
          console.log('this.receiverPhone', this.receiverPhone);
        }
      },
      receiverName: function (val) {
        if (val && val.length > 11) {
          this.receiverName = val.substring(0, 15);
        }
      },
      '$route' (to, from) {
        this.receiverName = '';
        this.receiverPhone = '';
        this.province = '';
        this.city = '';
        this.region = '';
        this.detailAddress = '';
      }
    },
    methods: {
      checkedText: function (val) {
        val.target.value = val.target.value.replace(/[`']/g, '');
        val.target.value = val.target.value.replace(/[`'\[]/g, '');
        val.target.value = val.target.value.replace(/[`\]]/g, '');
        val.target.value = val.target.value.replace(/[`~!@#$^%&*()=|{}:;,.<>\/?~！@#￥……&*（）——|{}【】‘；：”“。，、？]/g, '');
        if (val.target.value.length > 15) {
          val.target.value = val.target.value.slice(0, 15);
        }
      },
      add: function () {
        if (!this.receiverName.trim() || !this.province.trim() || !this.city.trim() || !this.detailAddress.trim()) {
          mui.alert('信息不能为空');
          return false;
        }
        if (!/^[1][34578][0-9]{9}$/.test(this.receiverPhone)) {
          mui.alert('手机号码格式不对');
          return false;
        }
        var data = {
          receiverName: this.receiverName,
          receiverPhone: this.receiverPhone,
          province: this.province,
          city: this.city,
          region: this.region,
          detailAddress: this.detailAddress
        };
        store.addAddress(data);
      },
      showPick: function () {
        var self = this;
        var picker = new mui.PopPicker({layer: 3});
        picker.setData(window.cityData3);
        picker.show(function (selectItems) {
          self.province = selectItems[0].text;
          self.city = selectItems[1].text;
          self.region = selectItems[2].text || '';
        });
      },
      back: function () {
        window.history.go(-1);
      }
    }
  };
</script>